<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script type="text/javascript" src="../../app/bower_components/jquery/dist/jquery.js"></script>

    <script type="text/javascript" src="jquery.bxslider.js"></script>





    <title>slider</title>

    <link href="jquery.bxslider.css" rel="stylesheet" type="text/css">

    <style>

        p{ width:100%; height:40px; font-size:20px; color:#333; line-height:40px; text-align:center; font-family:"微软雅黑"}

    </style>

</head>



<body>

<!-- ---------------------------------slider1--------------------------------------------- -->

<p>slider1(maxSlides)</p>

<div class="slider1">

    <div class="slide"><img src="images/FooBar1.png"></div>

    <div class="slide"><img src="images/FooBar2.png"></div>

    <div class="slide"><img src="images/FooBar3.png"></div>

    <div class="slide"><img src="images/FooBar4.png"></div>

    <div class="slide"><img src="images/FooBar5.png"></div>

    <div class="slide"><img src="images/FooBar6.png"></div>

    <div class="slide"><img src="images/FooBar7.png"></div>

    <div class="slide"><img src="images/FooBar8.png"></div>

    <div class="slide"><img src="images/FooBar9.png"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider1').bxSlider({

            slideWidth: 200,

            minSlides: 2,

            maxSlides: 3,

            slideMargin: 10

        });

    });

</script>



<!-- ---------------------------------slider2--------------------------------------------- -->

<p>slider2(slideWidth auto)</p>

<div class="slider2">

    <div class="slide"><img src="images/FooBar1.png"></div>

    <div class="slide"><img src="images/FooBar2.png"></div>

    <div class="slide"><img src="images/FooBar3.png"></div>

    <div class="slide"><img src="images/FooBar4.png"></div>

    <div class="slide"><img src="images/FooBar5.png"></div>

    <div class="slide"><img src="images/FooBar6.png"></div>

    <div class="slide"><img src="images/FooBar7.png"></div>

    <div class="slide"><img src="images/FooBar8.png"></div>

    <div class="slide"><img src="images/FooBar9.png"></div>

    <div class="slide"><img src="images/FooBar10.png"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider2').bxSlider({

            slideWidth: 300,

            auto: true,

            autoControls: true,

            minSlides: 2,

            maxSlides: 2,

            slideMargin: 10

        });

    });

</script>



<!-- ---------------------------------slider3--------------------------------------------- -->

<p>slider3(moveSlides)</p>

<div class="slider3">

    <div class="slide"><img src="images/FooBar1.png"></div>

    <div class="slide"><img src="images/FooBar2.png"></div>

    <div class="slide"><img src="images/FooBar3.png"></div>

    <div class="slide"><img src="images/FooBar4.png"></div>

    <div class="slide"><img src="images/FooBar5.png"></div>

    <div class="slide"><img src="images/FooBar6.png"></div>

    <div class="slide"><img src="images/FooBar7.png"></div>

    <div class="slide"><img src="images/FooBar8.png"></div>

    <div class="slide"><img src="images/FooBar9.png"></div>

    <div class="slide"><img src="images/FooBar10.png"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider3').bxSlider({

            slideWidth: 200,

            minSlides: 2,

            maxSlides: 3,

            moveSlides: 1,

            slideMargin: 10

        });

    });

</script>







<!-- ---------------------------------slider4--------------------------------------------- -->

<p>slider4(startSlide)</p>

<div class="slider4">

    <div class="slide"><img src="images/FooBar1.png"></div>

    <div class="slide"><img src="images/FooBar2.png"></div>

    <div class="slide"><img src="images/FooBar3.png"></div>

    <div class="slide"><img src="images/FooBar4.png"></div>

    <div class="slide"><img src="images/FooBar5.png"></div>

    <div class="slide"><img src="images/FooBar6.png"></div>

    <div class="slide"><img src="images/FooBar7.png"></div>

    <div class="slide"><img src="images/FooBar8.png"></div>

    <div class="slide"><img src="images/FooBar9.png"></div>

    <div class="slide"><img src="images/FooBar10.png"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider4').bxSlider({

            slideWidth: 200,

            minSlides: 2,

            maxSlides: 3,

            moveSlides: 1,

            startSlide: 1,

            slideMargin: 10

        });

    });

</script>







<!-- ---------------------------------slider5--------------------------------------------- -->

<p>slider5(Vertical)</p>

<div class="slider5">

    <div class="slide"><img src="images/FooBar1.png"></div>

    <div class="slide"><img src="images/FooBar2.png"></div>

    <div class="slide"><img src="images/FooBar3.png"></div>

    <div class="slide"><img src="images/FooBar4.png"></div>

    <div class="slide"><img src="images/FooBar5.png"></div>

    <div class="slide"><img src="images/FooBar6.png"></div>

    <div class="slide"><img src="images/FooBar7.png"></div>

    <div class="slide"><img src="images/FooBar8.png"></div>

    <div class="slide"><img src="images/FooBar9.png"></div>

    <div class="slide"><img src="images/FooBar10.png"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider5').bxSlider({

            mode: 'vertical',

            slideWidth: 200,

            minSlides: 2,

            slideMargin: 10

        });

    });

</script>







<!-- ---------------------------------slider6--------------------------------------------- -->

<p>slider6(Image)</p>

<div class="slider6">

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider6').bxSlider({

            mode: 'fade',

            slideWidth: 600,

            slideMargin: 10

        });

    });

</script>







<!-- ---------------------------------slider7--------------------------------------------- -->

<p>slider7(infiniteLoop hideControlOnEnd)</p>

<div class="slider7">

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider7').bxSlider({

            slideWidth: 600,

            infiniteLoop: false,

            hideControlOnEnd: true,

            slideMargin: 10

        });

    });

</script>







<!-- ---------------------------------slider8--------------------------------------------- -->

<p>slider8(adaptiveHeight)</p>

<div class="slider8">

    <div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>

    <div class="slide"><img src="http://placehold.it/600x300&text=FooBar2"></div>

    <div class="slide"><img src="http://placehold.it/600x150&text=FooBar3"></div>

    <div class="slide"><img src="http://placehold.it/600x250&text=FooBar4"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider8').bxSlider({

            slideWidth: 600,

            adaptiveHeight: true,

            startSlides: 0,

            slideMargin: 10

        });

    });

</script>







<!-- ---------------------------------slider9--------------------------------------------- -->

<p>slider9(ticker)</p>

<div class="slider9">

    <div class="slide"><img src="images/FooBar1.png"></div>

    <div class="slide"><img src="images/FooBar2.png"></div>

    <div class="slide"><img src="images/FooBar3.png"></div>

    <div class="slide"><img src="images/FooBar4.png"></div>

    <div class="slide"><img src="images/FooBar5.png"></div>

    <div class="slide"><img src="images/FooBar6.png"></div>

    <div class="slide"><img src="images/FooBar7.png"></div>

    <div class="slide"><img src="images/FooBar8.png"></div>

    <div class="slide"><img src="images/FooBar9.png"></div>

    <div class="slide"><img src="images/FooBar10.png"></div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $('.slider9').bxSlider({

            slideWidth: 200,

            minSlides: 3,

            maxSlides: 3,

            ticker: true,

            speed: 12000,

            startSlides: 0,

            slideMargin: 10

        });

    });

</script>



</body>



</html>

